<script>
import request from "../../../utils/request";
import audio from "../../../components/audio.vue";
import vocabularyDetail from "../../../components/vocabularyDetail.vue";
import { getNginxUrl } from "@/utils/settings"
export default {
  name: "list",
  components: { audio, vocabularyDetail },
  data() {
    return {
      wordList: [],
      pagination: {
        current: 1,
        size: 10,
      },
      queryParams: {
        thesaurusId: "",
        thesaurusName: "",
      },
    };
  },
  onLoad(query) {
    this.queryParams.thesaurusId = query.thesaurusId;
    this.queryParams.thesaurusName = decodeURIComponent(query.thesaurusName);
    this.pagination.current = parseInt(query.current);
    //动态设置页面标题
    uni.setNavigationBarTitle({
      title: this.queryParams.thesaurusName,
    });
    this.getWordList();
  },
  methods: {
		getNginxUrl,
    getWordList() {
      return new Promise(async (resolve, reject) => {
        const { total, records } = await request({
          url: "userWordsRecord/getWordList",
          data: {
            ...this.pagination,
            ...this.queryParams,
          },
          errorHandle: true,
          showLoading: true,
        });
        this.wordList = records;
      });
    },
  },
};
</script>

<template>
  <view class="page">
    <view class="title">
      <text>Unit\t</text>
      <text>{{ pagination.current }}</text>
    </view>
    <view class="list">
      <view class="item" v-for="item in wordList" :key="item.wordId">
        <view class="row title">{{ item.enWord }}</view>
        <view class="row">
          <audio :text="item.phonetic" :audio-src="item.wordAudioUrl ? getNginxUrl() + item.wordAudioUrl : ''"></audio>
        </view>
        <view class="row info">{{ item.znWord }}</view>
        <view class="footer">
          <view class="left"></view>
          <view class="right">
            <view
              class="btn"
              @click="
                () => {
                  $refs.vocabularyDetail.open(item.enWord);
                }
              "
              >查看详情</view
            >
          </view>
        </view>
      </view>
    </view>

    <vocabularyDetail ref="vocabularyDetail"></vocabularyDetail>
  </view>
</template>

<style scoped lang="scss">
.page {
	padding: {
		top: 30rpx;
		left: 30rpx;
		right: 30rpx;
		bottom: calc(30rpx + env(safe-area-inset-bottom));
	};
  min-height: 100vh;
  background: var(--gray-background-color);
  > .title {
    font-size: 40rpx;
    font-weight: 500;
  }
  > .list {
    > .item {
      margin-top: 30rpx;
      border-radius: 30rpx;
      background: white;
      padding: 30rpx;
      > .row {
        margin-bottom: 20rpx;
        &.title {
          font-size: 40rpx;
          font-weight: 500;
        }
        &.info {
          font-size: 30rpx;
          color: var(--text-color-light);
        }
      }
      > .footer {
        padding-top: 20rpx;
        border-top: 2rpx solid var(--border-color);
        display: flex;
        justify-content: space-between;
        .btn {
          border-radius: 30rpx;
          height: 60rpx;
          padding: 0 30rpx;
          display: flex;
          align-items: center;
          font-size: 30rpx;
          border: 2rpx solid var(--border-color);
        }
      }
    }
  }
}
</style>
